import React, { useState } from 'react'
import ReactNativeWrapper from '../ReactNativeWrapper'
import ReactNativeAdvanced from '../ReactNativeAdvanced'

const ReactNativeTest = () => {
  const [currentComponent, setCurrentComponent] = useState('wrapper')
  const [clickLog, setClickLog] = useState([])

  const handleNavigation = (action) => {
    const newLog = [...clickLog, { action, timestamp: new Date().toLocaleTimeString() }]
    setClickLog(newLog)
    console.log('React Native component clicked:', action)
  }

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h1>React Native 组件测试</h1>
      
      <div style={{ marginBottom: '20px' }}>
        <button 
          onClick={() => setCurrentComponent('wrapper')}
          style={{ 
            marginRight: '10px',
            padding: '8px 16px',
            backgroundColor: currentComponent === 'wrapper' ? '#007bff' : '#f8f9fa',
            color: currentComponent === 'wrapper' ? 'white' : '#333',
            border: '1px solid #ddd',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          基础版组件
        </button>
        <button 
          onClick={() => setCurrentComponent('advanced')}
          style={{ 
            padding: '8px 16px',
            backgroundColor: currentComponent === 'advanced' ? '#007bff' : '#f8f9fa',
            color: currentComponent === 'advanced' ? 'white' : '#333',
            border: '1px solid #ddd',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          高级版组件
        </button>
      </div>

      <div style={{ marginBottom: '20px' }}>
        {currentComponent === 'wrapper' ? (
          <ReactNativeWrapper onNavigate={handleNavigation} />
        ) : (
          <ReactNativeAdvanced onNavigate={handleNavigation} />
        )}
      </div>

      <div style={{ 
        backgroundColor: '#f8f9fa', 
        padding: '16px', 
        borderRadius: '8px',
        border: '1px solid #ddd'
      }}>
        <h3>点击日志</h3>
        {clickLog.length === 0 ? (
          <p style={{ color: '#666' }}>暂无点击记录</p>
        ) : (
          <ul style={{ margin: 0, paddingLeft: '20px' }}>
            {clickLog.map((log, index) => (
              <li key={index} style={{ marginBottom: '4px' }}>
                <strong>{log.action}</strong> - {log.timestamp}
              </li>
            ))}
          </ul>
        )}
      </div>

      <div style={{ marginTop: '20px', fontSize: '14px', color: '#666' }}>
        <p><strong>测试说明：</strong></p>
        <ul>
          <li>点击上方按钮可以切换不同的React Native组件</li>
          <li>点击组件中的卡片可以触发导航事件</li>
          <li>所有点击事件都会记录在下方的日志中</li>
          <li>可以在浏览器控制台查看详细的点击信息</li>
        </ul>
      </div>
    </div>
  )
}

export default ReactNativeTest
